<template>
  <div>
    <noscript>
      <strong>很抱歉，如果没有 JavaScript 支持，将不能正常工作。请启用浏览器的 JavaScript 然后继续。</strong>
    </noscript>
    <div id="app">
      <div class="home">
        <div class="home__main">
          <img class="home__loading" src="./image/loading-spin.svg" alt="loading" />
          <div class="home__title">正在加载资源</div>
          <div class="home__sub-title">初次加载资源可能需要较多时间 请耐心等待</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*import { mapActions, mapMutations } from 'vuex'
const VUE_APP_PATH = process.env.VUE_APP_PATH
var CryptoJS = require('crypto-js') // encryption*/

export default {
  data() {
    return {
      loginLoading: false,
      list: {
        username: '',
        password: ''
      }
    }
  },
  created() {
    if (this.getParam('ENCRYEMAN') && this.getParam('ENCRYDSP')) {
      //判断query带用户名和密码，执行登录
      this.list.username = window.atob(this.getParam('ENCRYEMAN'))
      this.list.password = window.atob(this.getParam('ENCRYDSP'))
      this.submit()
    } else {
      this.$router.push({ path: '/login' })
    }
  },
  methods: {
    /**
     * @description 提交表单
     */
    submit() {
      // 登录
      this.$store
        .dispatch('user/login', {
          username: this.list.username,
          password: this.list.password,
          type: '1',
          fromType: 'PC'
        })
        .then(() => {
          location.href = location.href.split('?')[0] // 把?参数后面的去除掉
          // 重定向对象不存在则返回顶层路径
          this.$router.replace(this.$route.query.redirect || '/')
          this.$router.go()
        })
        .catch(err => {
          this.$confirm(`${err.msg}，点击确定返回登录页`, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            showClose: false,
            showCancelButton: false,
            closeOnClickModal: false
          }).then(() => {
            this.$nextTick(() => {
              let timestamp = Date.parse(new Date())
               this.$router.push(`/login?redirect=${timestamp}`)
              this.logout()
            })
          })
        })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      location.reload()
    },
    /* 获取地址栏参数 */
    getParam(name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      let arr = window.location.hash.split('?')
      let r = arr[arr.length - 1].match(reg)
      if (r != null) return unescape(r[2])
      return null
    }
  }
}
</script>

<style scoped>
html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.home {
  /* background-color: #303133; */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home__main {
  user-select: none;
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.home__footer {
  width: 100%;
  flex-grow: 0;
  text-align: center;
  padding: 1em 0;
}

.home__footer > a {
  font-size: 12px;
  color: #606266;
  text-decoration: none;
}

.home__loading {
  height: 32px;
  width: 32px;
  margin-bottom: 20px;
  color: #606266;
}

.home__title {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.home__sub-title {
  color: #606266;
  font-size: 12px;
}
</style>
